/**
 * 操作按钮组件
 * @param {*} props 按钮配置参数
 */

import React from 'react';
import { Button, Popconfirm } from 'antd';
import { ROLE_BUTTON_TYPE } from '@/common/roleConstant';
import { Dropdown } from 'antd';
const HandleSetTable = (props) => {
  const { formItems = [] } = props;
  const getFields = () => {
    const children = [];
    formItems.forEach((item, index) => {
      const {
        type = 'button',
        title,
        visible = true,
        pop,
        auth = false,
        click,
        popText,
        disabled,
        style
      } = item;

      // 默认pop确认弹窗
      const popType = ['del', 'send', 'up', 'down'];
      const popShow = typeof pop === 'boolean' ? pop : popType.includes(type);

      // 显示名称
      const btnText = title || ROLE_BUTTON_TYPE[type] || '按钮';

      // 按钮为text 的情况下只显示文字
      const btnBlock =
        type === 'text' ? (
          btnText
        ) : (
          <Button
            key={`auth${type}${index}`}
            disabled={disabled}
            type="link"
            size="small"
            onClick={click}
          >
            {btnText}
          </Button>
        );

      visible
        ? children.push(
          popShow ? (
            <React.Fragment key={`auth${type}${index}`}>
              <Popconfirm
                placement="top"
                title={
                  popText ? (
                    <div style={{ whiteSpace: 'pre-line' }}>{popText}</div>
                  ) : (
                    `确认${btnText}？`
                  )
                }
                onConfirm={click}
                okText="确认"
                cancelText="取消"
              >
                <Button disabled={disabled} type="link" size="small">
                  {btnText}
                </Button>
              </Popconfirm>
            </React.Fragment>
          ) : (
            btnBlock
          ),
        )
        : null;
    });
    return <div style={formItems.length > 3 ? { width: 160, whiteSpace: 'break-spaces' } : {}}>{children}</div>;
    // return (
    //   <Dropdown
    //     menu={{
    //       items: children.map((item, index) => ({
    //         key: index,
    //         label: item,
    //       })),
    //     }}
    //     placement="right"
    //     arrow
    //   >
    //     <Button>操作</Button>
    //   </Dropdown>
    // );
  };

  return getFields();
};

export default HandleSetTable;
